<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>保险产品管理</el-breadcrumb-item>
      <el-breadcrumb-item>增加保险产品</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-form label-width="80px" :model="ruleForm">
        <h3>添加保险产品</h3>
        <el-col :span="8">
          <el-form-item label="保险名称">
            <el-input v-model.lazy="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="保险种类">
            <el-select v-model.lazy="ruleForm.insuranceTypeId" placeholder="请选择保险种类">
              <el-option :label="item.name" :value="item._id" v-for="item in InsuranceType"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投保金额">
            <el-input v-model.lazy="ruleForm.price"></el-input>
          </el-form-item>
          <el-form-item label="赔付金额">
            <el-input v-model.lazy="ruleForm.payment"></el-input>
          </el-form-item>
          <el-form-item label="有效时间">
            <el-select v-model="ruleForm.duration" placeholder="请选择时间">
              <el-option label="1天" value="1"></el-option>
              <el-option label="2天" value="2"></el-option>
              <el-option label="5天" value="5"></el-option>
              <el-option label="8天" value="8"></el-option>
              <el-option label="12天" value="12"></el-option>
              <el-option label="15天" value="15"></el-option>
              <el-option label="20天" value="20"></el-option>
              <el-option label="25天" value="25"></el-option>
              <el-option label="30天" value="30"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add">确认新增</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
    <!-- 卡片视图 -->
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
  "insurances"
);
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        price: "",
        insuranceTypeId: "",
        payment: "",
        duration: "",
      },
    };
  },

  computed: {
    ...mapState(["InsuranceType"]),
  },

  created() {
    this.lgetAllInsurances();
  },

  methods: {
    ...mapActions(["addInsurance", "lgetAllInsurances"]),
    add() {
      this.addInsurance(this.ruleForm);
      this.$router.push("/productlist");
    },
  },
};
</script>

<style>
</style>